
<%@ include file="../common.jsp" %>
<script type="text/javascript">
	$(document).ready(function(){
		 setWorkFlowURL('<c:out value="${flowExecutionUrl}" />');
		 
		 var icons = {
					header: "ui-icon-plusthick",
					headerSelected: "ui-icon-minusthick"
					};

			
		 	
		searchLayout = $('#contentDiv').layout({
			 west__size: 				300
			,west__closable: 			false
			,west__resizable:			false
			,west__spacing_open:		5
			,west__spacing_closed:		5
			,west__paneSelector: 		'#accordionTree'
			,center__paneSelector: 		'#searchResult'

		});
		appMainLayout.resizeAll();
		$(".browseTree").each(function(index){
			 $(this).dynatree({
			      title: "Event samples",
			      persist: true,
			      generateIds: true,
			      onActivate: function(node) {
		          	loadDocument(node.data.key);
		          }
		        
			});
		});
		$( "#accordionTree" ).accordion({
			icons: icons,
			fillSpace: false
		});
		/* $("#browseTree").dynatree({
		      title: "Event samples",
		      persist: true,
		      generateIds: true,
		      onActivate: function(node) {
	          	loadDocument(node.data.key);
	          }
	        
		}); */
	});
	
</script>
<!-- <style type="text/css">
	div.browseTree {
		background-color: #F2F2F2 !important;
		background-image: none;
	}
</style> -->

<%-- <div id="browseTree" style="height: 100%;">
	<ul>
		<c:forEach var="docTypeMap" items="${docTypeMap}">
			<li id="${docTypeMap.key}" data="key: ${docTypeMap.key}" >${docTypeMap.value}
				<ul>
					<c:forEach items="${docTypeCatMap[docTypeMap.key]}" var="docCategory">
						<li id="${docCategory.dcId}"  data="key: '${docTypeMap.key}_${docCategory.dcId}'" >${docCategory.dcName}
							<ul>
								<c:forEach items="${docCatSubCatMap[docCategory.dcId]}" var="docSubCategory">
									<li id="${docSubCategory.dscId}" data="key: '${docTypeMap.key}_${docCategory.dcId}_${docSubCategory.dscId}'" >${docSubCategory.dscName}</li>
								</c:forEach>
							</ul>
						</li>
					</c:forEach>
				</ul>
			</li>
		</c:forEach>
	</ul>
</div> --%>

<div id="accordionTree" style="height: 100%; vertical-align:middle; " class="accordionFont">
	<c:forEach var="docTypeMap" items="${docTypeMap}">
	<h2 class="ui-accordion-header" id="${docTypeMap.key}" data="key: ${docTypeMap.key}" style="height: 35px; padding-left: 25px; vertical-align: middle;"> 
	<span style="line-height:35px; vertical-align: baseline;"> ${docTypeMap.value} </span> </h2>
		<div id="browseTree_${docTypeMap.key}" class="ui-accordion ui-accordion-content browseTree">
			<ul>
			<c:forEach items="${docTypeCatMap[docTypeMap.key]}" var="docCategory">
				<li id="${docCategory.dcId}"  data="key: '${docTypeMap.key}_${docCategory.dcId}'" >${docCategory.dcName}
					<ul>
					<c:forEach items="${docCatSubCatMap[docCategory.dcId]}" var="docSubCategory">
						<li id="${docSubCategory.dscId}" data="key: '${docTypeMap.key}_${docCategory.dcId}_${docSubCategory.dscId}'" >${docSubCategory.dscName}</li>
					</c:forEach>
					</ul>
				</li>			
			</c:forEach>
			</ul>
		</div>	
	</c:forEach>
</div>

<div id="searchResult" class="ui-layout-center" align="center" style="margin: auto;"></div>